<template>
	<page-meta :root-font-size="`${fontSize}px`"></page-meta>
  <view class="clock-container">
    <view class="map_view">
      <map
        :scale="scale"
        :style="{ height: mapHeight + 'vh' }"
        :position="position"
        width="750rpx"
        name=""
        :markers="markers"
        :latitude="latitude"
        :longitude="longitude"
      ></map>
    </view>
    <!-- <button @click="reback" type="default">全部</button> -->

    <view class="scrollList">
      <view @click="reback" class="scrollImg" v-if="markers.length === 1">
        <view class="scrollImg_text">查看全部</view>
        <image
          style="width: 70rpx; height: 70rpx"
          src="../../static/images/all.png"
          mode=""
        ></image>
      </view>
      <view @click="reback" class="scrollLength">
        <view class="scrollImg_text">{{ markers.length }}个</view>
      </view>
      <scroll-view
        scroll-y
        :style="{ height: scrollHeight + 'vh' }"
        @click="vancellClick"
      >
        <van-cell-group inset>
          <van-cell
            v-for="item in markers"
            :id="item.id"
            :title="item.callout.content"
            :key="item.id"
            icon="location-o"
            :label="item.position"
          />
        </van-cell-group>
        <!-- <van-cell  v-for="item in markers"  :id="item.id" :title="item.callout.content" :key="item.id" icon="location-o" /> -->
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState(['fontSize'])
  },
  data() {
    return {
      item: {},
      pointInfo: {},
      markersCopy: [],
      markers: [
        {
          id: 0,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.381863,
          longitude: 120.2609,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区桐鹤名苑一区南",
          callout: {
            content: "周扬社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 1,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.374288,
          longitude: 120.25527,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区万乐路",
          callout: {
            content: "万乐社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 2,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.383251,
          longitude: 120.259466,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "杭州市临平区临丁路星乐小区-1区东南侧",
          callout: {
            content: "贾家社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 3,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.377071,
          longitude: 120.242723,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区天都路(广厦天都城爵士花园西侧约100米)",
          callout: {
            content: "民乐社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 4,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.377857,
          longitude: 120.246863,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区星桥街道宾果公寓西门旁商铺2-10号",
          callout: {
            content: "星仪社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 5,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.389543,
          longitude: 120.24652,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区欢东路浙江天都城酒店东南侧约230米",
          callout: {
            content: "香榭社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 6,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.405177,
          longitude: 120.246264,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区星桥街道星韵路190-3号",
          callout: {
            content: "汤家社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 7,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.398558,
          longitude: 120.258865,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "杭州市临平区星桥北路黄鹤山居西南侧约50米",
          callout: {
            content: "南星社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 8,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.409743,
          longitude: 120.260495,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区星发街55号枉山产业楼2层",
          callout: {
            content: "枉山社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 9,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.39909,
          longitude: 120.265477,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区藕花洲大街西段214",
          callout: {
            content: "太平社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 10,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.396854,
          longitude: 120.267553,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "杭州市临平区太平路65号",
          callout: {
            content: "班荆社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 11,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.383658,
          longitude: 120.250253,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区天星苑9-3",
          callout: {
            content: "隆昌社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 12,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.39274,
          longitude: 120.25275,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "杭州市临平区星桥北路黄鹤山居西南侧约50米",
          callout: {
            content: "黄鹤社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 13,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.39277,
          longitude: 120.25282,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区藕花洲大街西段613",
          callout: {
            content: "星都社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 14,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.384121,
          longitude: 120.25566,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区留月街1号",
          callout: {
            content: "安乐社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          //   name: "星桥社区",
          //   position: [120.261382, 30.392303],
          id: 15,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.381863,
          longitude: 120.2609,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区桐鹤名苑一区南",
          callout: {
            content: "星桥社区党群服务中心",
            display: "ALWAYS",
          },
        },
        {
          id: 16,
          iconPath: "../../static/images/newIcon/drop.png",
          latitude: 30.39759,
          longitude: 120.25968,
          width: 20, //图片显示宽度
          height: 20, //图片显示高度
          position: "浙江省杭州市临平区星桥北路51",
          callout: {
            content: "五云社区党群服务中心",
            display: "ALWAYS",
          },
        },
      ],
      scale: 13,
      scrollHeight: 40,
      mapHeight: 60,
      latitude: null,
      longitude: null,

      inRange: "",
      includePointsCopy: [],
      includePoints: [
        {
          latitude: 30.368114,
          longitude: 120.241669,
        },
        {
          latitude: 30.374222,
          longitude: 120.255464,
        },
        {
          latitude: 30.381809,
          longitude: 120.261299,
        },
        {
          latitude: 30.377593,
          longitude: 120.243104,
        },
        {
          latitude: 30.378138,
          longitude: 120.247051,
        },
        {
          latitude: 30.388906,
          longitude: 120.247827,
        },
        {
          latitude: 30.405163,
          longitude: 120.246183,
        },
        {
          latitude: 30.400606,
          longitude: 120.258231,
        },
        {
          latitude: 30.409732,
          longitude: 120.259615,
        },
        {
          latitude: 30.399077,
          longitude: 120.265317,
        },
        {
          latitude: 30.396551,
          longitude: 120.268051,
        },
        {
          latitude: 30.383726,
          longitude: 120.250318,
        },
        {
          latitude: 30.399402,
          longitude: 120.261153,
        },
        {
          latitude: 30.39283,
          longitude: 120.252786,
        },
        {
          latitude: 30.388082,
          longitude: 120.252086,
        },
        {
          latitude: 30.392303,
          longitude: 120.261382,
        },
        {
          latitude: 30.397434,
          longitude: 120.260134,
        },
      ],
    };
  },
  onLoad(options) {
    this.includePointsCopy = JSON.parse(JSON.stringify(this.includePoints));
    this.markersCopy = JSON.parse(JSON.stringify(this.markers));
    let arr = JSON.parse(JSON.stringify(this.includePoints));
    let arr1 = arr.map((x) => x.latitude);
    let num1 = arr1.reduce((prev, cur) => {
      return prev + cur;
    });
    this.centerlatitude = (num1 / arr1.length).toFixed(6);
    this.latitude = (num1 / arr1.length).toFixed(6);
    let arr2 = arr.map((x) => x.longitude);
    let num2 = arr2.reduce((prev, cur) => {
      return prev + cur;
    });
    this.centerlongitude = (num2 / arr1.length).toFixed(6);
    this.longitude = (num2 / arr1.length).toFixed(6);
    this.getCurrentTime();

    uni.getLocation({
      type: "wgs84",
      success: function (res) {
        console.log("当前位置的经度：" + res.longitude);
        console.log("当前位置的纬度：" + res.latitude);
      },
    });
  },

  methods: {
    getCurrentTime() {
      let time = new Date();
      let h = time.getHours() < 10 ? "0" + time.getHours() : time.getHours();
      let m =
        time.getMinutes() < 10 ? "0" + time.getMinutes() : time.getMinutes();
      let s =
        time.getSeconds() < 10 ? "0" + time.getSeconds() : time.getSeconds();
      this.time = `${h}:${m}:${s}`;
    },
    getLocation() {
      uni.showLoading();
      uni.getLocation({
        type: "gcj02",
        success: (res) => {
          uni.showToast({
            title: "定位成功",
          });
          console.log(res);
          console.log("当前位置的经度：" + res.longitude);
          console.log("当前位置的纬度：" + res.latitude);
        },
        fail: (res) => {
          uni.hideLoading();
          uni.showToast({
            title: "操作频繁,请稍后再试",
            icon: "none",
          });
          console.log(res);
        },
      });
      uni.hideLoading();
    },
    vancellClick(e) {
      console.log(e.target.id);
      let info = this.markersCopy.find((x) => x.id == e.target.id);
      this.markers = [info];
      this.includePoints = [
        {
          latitude: info.latitude,
          longitude: info.longitude,
        },
      ];
      (this.latitude = info.latitude), (this.longitude = info.longitude);
      console.log(info);
      this.scale = 18;
      this.scrollHeight = 13;
      this.mapHeight = 87;
    },
    reback() {
      this.includePoints = this.includePointsCopy;
      this.markers = this.markersCopy;
      this.scale = 13;
      this.latitude = this.centerlatitude;
      this.longitude = this.centerlongitude;
      this.scrollHeight = 40;
      this.mapHeight = 60;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  padding: 0rpx;
  margin: 0rpx;
}

page {
  height: 100vh;
}

map {
  width: 750rpx;
}

.list_view {
  height: 30vh;
}

.scrollList {
  position: relative;
}

.scrollImg {
  position: absolute;
  display: flex;
  top: -110rpx;
  right: 10rpx;
  z-index: 100;
  color: #333;
}
.scrollLength {
  position: absolute;
  top: -60rpx;
  left: 15rpx;
  z-index: 100;
  color: #666666;
}

.scrollImg_text {
  height: 50rpx;
  line-height: 50rpx;
  margin-top: 10rpx;
  font-size: 30rpx;
}
</style>